<template>
    <div class='my_container'>
        <div class="backdrop"></div>
        <div class="my_content">
            <div class="my_detail">
                <div class="avatar">
                    <img :src="userDetail.icon" alt="" style="border-radius: 50%;">
                </div>
                <div class="name_detail">
                    <span class="userName">{{ userDetail.username }}</span>
                    <div style="font-size: 12px;" :class="{ blueClass: userDetail.islogin, redClass: !userDetail.islogin }">
                        {{ userDetail.islogin ? '登陆中' : '未登录' }}</div>
                    <el-tooltip class="item" effect="light" :content="userDetail.phone" placement="top">
                        <div class="phone"> {{$t('wechat.phone')}}：{{ userDetail.phone }}</div>
                    </el-tooltip>
                    <div class="updateTime" style="font-size: 12px;">更新时间：{{ userDetail.updatetime }}</div>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <div class="nav" v-show="isNav">
            <div @click="downHandler" :class="{'blueClass':isShow == 'down'}"  v-show="this.sendData.class == '爱奇艺'">
                <i class="el-icon-download"></i>
                <span>下载记录</span>
            </div>
            <div @click="collectHandler" :class="{'blueClass':isShow == 'collect'}">
                <i class="el-icon-collection-tag"></i>
                <span>收藏记录</span>
            </div>
            <div @click="searchHandler"  :class="{'blueClass':isShow == 'search'}">
                <i class="el-icon-search"></i>
                <span>搜索记录</span>
            </div>
        </div>
        <div class="content">
            <!-- 搜索记录 -->
            <div style="margin-top: 10px;" v-show='isShow == "search"' class="searchRecord">
                <div style="display: flex;justify-content:space-between;">
                    <div class="titles"><i class="el-icon-search"></i> 搜索记录</div>
                    <div style="display:flex;">
                        <span>页码：</span>
                        <el-pagination @current-change="handleCurrentChange1" :current-page="offset" :page-size="limit"
                            layout="prev, pager, next" :total="searchTotal" :small="true">
                        </el-pagination>
                    </div>
                </div>
                <el-table class="table" :data="tableData" stripe style="width: 100% ;" size="mini">
                    <el-table-column prop="conten" label="影视名" width="100">
                    </el-table-column>
                    <el-table-column prop="timestamp" label="时间" width="150">
                    </el-table-column>
                    <el-table-column prop="result" label="结果">
                    </el-table-column>
                </el-table>
            </div>
            <!-- 收藏记录 -->
            <div style="margin-top: 10px;" v-show='isShow == "collect"'>
                <div class="titles"><i class="el-icon-collection-tag"></i> 收藏记录</div>
                <div class="divs" ref="collect" @scroll="handleScroll">
                    <div class="collectDetail" v-for="(item, idx) in collectList" :key="idx">
                        <div style="width: 180px;height: 80px;">
                            <img class="cover" :src="item.imgurl" alt="">
                        </div>
                        <div class="collectContent">
                            <div>{{ item.videoname }}</div>
                            <div>{{ item.shorttitle }}</div>
                        </div>
                        <div class="time">{{ item.timestamp }}</div>
                    </div>
                    <div v-show="showLoading">
                        <el-divider>{{ loadingText }}</el-divider>
                    </div>
                </div>
            </div>
            <!-- 下载记录 -->
            <div style="margin-top: 10px;" v-show='isShow == "down"' class="downRecord">
                <div style="display: flex;justify-content:space-between;">
                    <div class="titles"><i class="el-icon-download"></i> 下载记录</div>
                    <div style="display:flex;">
                        <span>页码：</span>
                        <el-pagination @current-change="handleCurrentChange" :current-page="offset" :page-size="limit"
                            layout="prev, pager, next" :total="downTotal" :small="true">
                        </el-pagination>
                    </div>
                </div>
                <el-table :data="downList" class="downTable">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand" size="mini">
                                <el-form-item label="名称">
                                    <span>{{ props.row.title }}</span>
                                </el-form-item>
                                <el-form-item label="下载时间">
                                    <span>{{ props.row.downdate }}</span>
                                </el-form-item>
                                <el-form-item label="视频时长">
                                    <span>{{ Math.ceil(props.row.duration / 60) }}分钟</span>
                                </el-form-item>
                                <el-form-item label="进度">
                                    <span>{{ Math.floor(props.row.progress) }}%</span>
                                </el-form-item>
                                <el-form-item label="视频大小">
                                    <span>{{ change(props.row.size) }}</span>
                                </el-form-item>
                                <el-form-item label="文件名称">
                                    <span style="max-width: 100px;word-break: break-all;;display:inline-block;">{{
                                        props.row.filename }}</span>
                                </el-form-item>
                                <el-form-item label="文件路径">
                                    <span style="max-width: 180px;word-break: break-all;;display:inline-block;">{{
                                        props.row.filedir }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column label="图片" align="center" width="120">
                        <template slot-scope="{row}">
                            <div style="width: 100px;height: 60px;">
                                <img :src="row.imgurl" class="cover">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="title" align="center">
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>

<script>
import { getUserApi, getSearchApi, getDownApi, getCollectApi, getUserSKApi, getCollectSKApi, getSearchSKApi, getUserTYApi, getSearchTYApi,getUserVRApi } from "@/api/addApp/aiqiyi_api"
import { throttle } from 'lodash';
export default {
    name: "my-message",
    props: ['sendData'],
    components: {

    },
    data() {
        return {
            isShow: 'down',//控制下载、收藏，搜过页面的显隐
            tableData: [],
            userDetail: {},
            downList: [],
            collectList: [],
            offset: 1,
            limit: 20,
            downTotal: 0,
            searchTotal: 0,
            isNav: true,//控制nav的显隐
            list: [],
            loadingText: '正在加载中...',
            showLoading: false,//控制加载文本的显示
        };
    },
    mounted() {
        if (this.sendData.class == '爱奇艺') {
            this.getUserDetail();
            this.getDownList();
        } else if (this.sendData.class == '爱奇艺随刻') {
            this.getSearchSKList();
            this.getUserDetailSK();
            this.getCollectSKList();
            this.isShow = 'collect'
        } else if (this.sendData.class == '爱奇艺体育') {
            this.isNav = false;
            this.getSearchTYList();
            this.getUserDetailTY();
            this.isShow = 'search';
        }else if(this.sendData.class=='爱奇艺VR'){
            this.isNav = false;
            this.getUserDetailVR();
            this.isShow = '';
        }
    },
    watch: {
        sendData(newVal) {
            this.downTotal = 0
            this.searchTotal = 0
            if (newVal.class == '爱奇艺体育') {
                this.isNav = false
                this.isShow = 'search'
                this.getSearchTYList();
                this.getUserDetailTY();
            }else if(newVal.class == '爱奇艺VR'){
                this.isNav = false;
                this.isShow = '';
                this.getUserDetailVR();
            }
        },
        isShow(newVal, oldVal) {
            if (newVal != oldVal) {
                this.downTotal = 0
                this.searchTotal = 0
                if (newVal == 'collect') {
                    this.collectList = [];
                    this.loadingText = '正在加载中...';
                    this.showLoading = false;
                    const collect = this.$refs.collect;
                    collect.scrollTop = 0
                }
            }
        },

    },
    methods: {
        // handleSizeChange(val) {
        //     console.log(`每页 ${val} 条`);
        // },
        //下载分页回调
        handleCurrentChange(val) {
            this.offset = val
            this.getDownList();
        },
        //搜索分页回调
        handleCurrentChange1(val) {
            this.offset = val
            if (this.sendData.class == '爱奇艺') {
                this.getSearchList();
            } else if (this.sendData.class == '爱奇艺随刻') {
                this.getSearchSKList()
            } else if (this.sendData.class == '爱奇艺体育') {
                this.getSearchTYList()
            }
        },
        //判断是否滚到底部 触发条件
        handleScroll: throttle(function () {
            const collect = this.$refs.collect;
            // 判断滚动到底部
            if (collect.scrollTop + collect.clientHeight + 10 + 10 >= collect.scrollHeight) {

                this.showLoading = true;
                if (this.list.length == this.limit) {
                    this.loadingText = '正在加载. . .';
                    this.offset++
                    if (this.sendData.class == '爱奇艺') {
                        this.getCollectList();
                    } else if (this.sendData.class == '爱奇艺随刻') {
                        this.getCollectSKList();
                    }
                } else {
                    this.loadingText = '到底了 没有更多了！';
                }
            }
        }),
        //-----------------爱奇艺----------------
        //获取搜索列表
        async getSearchList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getSearchApi(data);
                this.tableData = list.data;
                if (!this.searchTotal) {
                    this.searchTotal = Number(list.data[0].total)
                }
            } catch (error) {
                console.error(error);
            }
        },
        //获取用户信息
        async getUserDetail() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getUserApi(data);
                this.userDetail = list.data[0];
            } catch (error) {
                console.error(error);
            }
        },
        //获取下载记录
        async getDownList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getDownApi(data);
                this.downList = list.data;
                if (!this.downTotal) {
                    this.downTotal = Number(list.data[0].total)
                }
            } catch (error) {
                console.error(error);
            }
        },
        //获取收藏记录
        async getCollectList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getCollectApi(data);
                this.list = list.data;
                this.collectList.push(...list.data);
            } catch (error) {
                console.error(error);
            }
        },
        //-----------------爱奇艺随刻----------------
        //获取搜索列表
        async getSearchSKList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getSearchSKApi(data);
                this.tableData = list.data;
                if (!this.searchTotal) {
                    this.searchTotal = Number(list.data[0].total)
                }
            } catch (error) {
                console.error(error);
            }
        },
        //获取用户信息
        async getUserDetailSK() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getUserSKApi(data);
                this.userDetail = list.data[0];
            } catch (error) {
                console.error(error);
            }
        },
        //获取收藏记录
        async getCollectSKList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getCollectSKApi(data);
                this.list = list.data;
                this.collectList.push(...list.data);
            } catch (error) {
                console.error(error);
            }
        },
        //------------------爱奇艺体育-----------------
        //获取搜索列表
        async getSearchTYList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getSearchTYApi(data);
                this.tableData = list.data;
                if (!this.searchTotal) {
                    this.searchTotal = Number(list.data[0].total)
                }
            } catch (error) {
                console.error(error);
            }
        },
        //获取用户信息
        async getUserDetailTY() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getUserTYApi(data);
                this.userDetail = list.data[0];
            } catch (error) {
                console.error(error);
            }
        },
        //------------------爱奇艺VR-------------------
        //获取用户信息
        async getUserDetailVR() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getUserVRApi(data);
                this.userDetail = list.data[0];
            } catch (error) {
                console.error(error);
            }
        },
        //------------------功能函数-----------------
        //点击下载记录的回调
        downHandler() {
            if (this.isShow != 'down') {
                this.isShow = 'down'
                this.offset = 1
                if (this.sendData.class == '爱奇艺') {
                    this.getDownList()
                }
            }
        },
        //点击收藏记录的回调
        collectHandler() {
            if (this.isShow != 'collect') {
                this.isShow = 'collect'
                this.offset = 1
                if (this.sendData.class == '爱奇艺') {
                    this.getCollectList()
                } else if (this.sendData.class == '爱奇艺随刻') {
                    this.getCollectSKList()
                }
            }
        },
        //点击搜索记录的回调
        searchHandler() {
            if (this.isShow != 'search') {
                this.isShow = 'search'
                this.offset = 1
                if (this.sendData.class == '爱奇艺') {
                    this.getSearchList();
                } else if (this.sendData.class == '爱奇艺随刻') {
                    this.getSearchSKList();
                }
            }
        },
        //计算视频大小
        change(limit) {
            if (limit == 0) return limit;
            var size = "";
            if (limit < 0.1 * 1024) {                            //小于0.1KB，则转化成B
                size = limit.toFixed(2) + "B"
            } else if (limit < 0.1 * 1024 * 1024) {            //小于0.1MB，则转化成KB
                size = (limit / 1024).toFixed(2) + "KB"
            } else if (limit < 0.1 * 1024 * 1024 * 1024) {        //小于0.1GB，则转化成MB
                size = (limit / (1024 * 1024)).toFixed(2) + "MB"
            } else {                                            //其他转化成GB
                size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
            }

            var sizeStr = size + "";                        //转成字符串
            var index = sizeStr.indexOf(".");                    //获取小数点处的索引
            var dou = sizeStr.substr(index + 1, 2)            //获取小数点后两位的值
            if (dou == "00") {                                //判断后两位是否为00，如果是则删除00               
                return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
            }
            return size;
        },
    }
};
</script>

<style lang='scss' scoped>
.titles {
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    background-color: #03a3e3;
    width: 110px;
    border-radius: 20px;
    margin-left: 10px;
    text-align: center;
}

.cover {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blueClass {
    color: #03a3e7;
}

.redClass {
    color: red;
}

.my_container {
    position: relative;

    .backdrop {
        background: linear-gradient(to bottom, #e0e0e0, #fff);
        width: 100%;
        height: 200px;
    }

    .my_content {
        position: absolute;
        top: 50px;
        left: 7%;
        background-color: #fff;
        width: 86%;
        height: 150px;
        border-radius: 10px;
        padding: 20px;

        .my_detail {
            display: flex;

            .avatar {
                border-radius: 50%;
                width: 80px;
                height: 80px;
                overflow: hidden;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .name_detail {
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                // >span:first-child {
                //     font-weight: 900;
                // }
                .userName {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 220px;
                    font-weight: 900;
                }

                .phone {
                    font-size: 12px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 220px;
                }

                .updateTime {
                    max-width: 220px;
                }
            }
        }
    }

    .line {
        height: 1px;
        width: 100%;
        background-color: #e0e0e0;
        margin-top: 10px;
    }

    .nav {
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-around;
        margin: 10px;
        padding: 10px;

        div {
            display: flex;
            flex-direction: column;
            align-items: center;

            i {
                font-size: 20px;
            }
        }

        :hover {
            color: #03a3e3;
            cursor: pointer;
        }
    }

    .content {


        .searchRecord {
            // height: 40vh;

            .table {
                padding: 0 10px;
                height: 500px;
                overflow-y: auto;
                padding-bottom: 100px;
            }

            @media screen and (min-width: 2360px) {
                .table {
                    height: 430px;
                }
            }

            @media screen and (min-width: 2561px) {
                .table {
                    height: 295px;
                }
            }
        }

        .divs {
            height: 500px;
            overflow-y: auto;
            padding-bottom: 100px;

            .collectDetail {

                display: flex;
                align-items: center;
                padding: 10px 10px 0 10px;
                position: relative;

                .collectContent {
                    width: 50%;
                    margin-left: 20px;

                    div:nth-child(1) {
                        font-weight: 900;
                        font-size: 14px;
                    }

                    div:nth-child(2) {
                        color: #887e7e;
                        margin-top: 5px;
                    }
                }

                .time {
                    position: absolute;
                    bottom: 0px;
                    right: 10px;
                    font-size: 10px;
                    color: #a8a8a8;
                }

            }

        }

        @media screen and (min-width: 2360px) {
            .divs {
                height: 433px;
            }
        }

        @media screen and (min-width: 2561px) {
            .divs {
                height: 300px;
            }
        }


        .downRecord {
            .demo-table-expand {
                font-size: 0;
            }

            .demo-table-expand label {
                width: 90px;
                color: #99a9bf;
            }

            .demo-table-expand .el-form-item {
                margin-right: 0;
                margin-bottom: 0;
                width: 50%;
            }

            .downTable {
                width: 100%;
                height: 500px;
                overflow-y: auto;
                padding-bottom: 100px;
            }

            ::before {
                height: 0px;
            }

            @media screen and (min-width: 2360px) {
                .downTable {
                    height: 443px;
                }
            }

            @media screen and (min-width: 2561px) {
                .downTable {
                    height: 301px;
                }
            }
        }
    }



}
</style>